<template>
  <div class="w-100 h-100" id="gwglfswsl"></div>
</template>

<script setup lang="ts">
import { useOptions } from "@/hook/useOptions";
import * as echarts from "echarts";

var xdata = useOptions().fswName;

const option = {
  backgroundColor: "transparent", //背景色
  tooltip: {
    trigger: "axis",
    backgroundColor: "rgba(28,64,81,0.7)",
    borderColor: "transparent",
    textStyle: {
      color: "white",
      fontSize: 20,
    },
    formatter: function (params: any) {
      return params[0].name + " ：" + params[0].value;
    },
  },
  grid: { left: "10%", right: "10%", top: "15%", bottom: "12%" },
  xAxis: {
    data: xdata,
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      show: true,
      rotate: 0,
      interval: 0,
      textStyle: {
        fontSize: 20,
        color: "#667A8E",
      },
    },
  },
  yAxis: {
    name: "个",
    nameTextStyle: {
      color: "rgba(255,255,255,1)",
      fontSize: 20,
      padding: [0, 0, 10, -20],
    },
    splitLine: {
      show: true,
      lineStyle: {
        color: "rgba(255,255,255,.1)",
      },
    },
    axisTick: {
      show: false,
    },
    axisLine: {
      lineStyle: {
        color: "rgba(255,255,255,.1)",
      },
    },
    axisLabel: {
      show: true,
      textStyle: {
        fontSize: 20,
        color: "#667A8E",
      },
    },
  },
  // color: ["#e54035"],
  series: [
    {
      name: "数量",
      barMinHeight: 10,
      type: "pictorialBar",
      barCategoryGap: "40%",
      // symbol: 'path://M0,10 L10,10 L5,0 L0,10 z',
      symbol: "path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z",
      itemStyle: {
        normal: {
          //barBorderRadius: 5,
          //渐变色
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(96,255,206, 1)",
            },

            {
              offset: 1,
              color: "rgba(96,255,206,0)",
            },
          ]),
        },
      },

      data: [],
      z: 10,
    },
  ],
};
let myChart: any;

onMounted(() => {
  myChart = echarts.init(document.getElementById("gwglfswsl") as HTMLElement);
  myChart.setOption(option);
});

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.underJsc.gwglfswsl;
  } catch (error) {}
  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {
      myChart.setOption({
        series: [{ data: val }],
      });
    }
  }
);
</script>

<style lang="less" scoped></style>
